<template>
  <!-- 行情 -->
  <div class="app-container">
    <config-able-table
      v-for="k in Object.keys(meta)"
      :key="k"
      :table-headers="meta[k].tableHeaders"
      :uid="meta[k].id"
      :table-name="meta[k].tableName"
      :name="meta[k].name"
    />
  </div>
</template>

<style scoped>
.quote-table {
  width: 100%;
  height: 150px;
}
</style>

<script>
import { getPageMeta, getModelMeta } from '@/api/normal'
export default {
  data() {
    return {
      complete: false,
      meta: {
        TickData: {
          list: null,
          listLoading: true,
          tableName: '行情列表',
          id: 'symbol',
          tableHeaders: [
            { name: '代码', field: 'symbol' },
            { name: '交易所', field: 'exchange' },
            { name: '类型', field: 'product' },
            { name: '最新价', field: 'last_price' },
            { name: '成交量', field: 'volume' },
            { name: '开', field: 'open' },
            { name: '高', field: 'high' },
            { name: '低', field: 'low' },
            { name: '收', field: 'close' },
            { name: '时间', field: 'dt' },
            { name: '接口', field: 'broker' }
          ],
          dataPath: null
        }
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getPageMeta({ name: 'overview' })
        .then((response) => {
          if (response.code === 20000) {
            response.data.forEach((element) => {
              this.meta[element.name] = {}
              this.meta[element.name].tableName = element.title
            })
          }
        })
        .then(() => {
          Object.keys(this.meta).forEach((k) => {
            getModelMeta({ model: k }).then((response) => {
              if (response.code === 20000) {
                this.meta[k].tableHeaders = response.data.headers
                this.meta[k].id = response.data.id
                this.meta[k].tableName = response.data.name
                this.meta[k].name = k
              }
            })
          })
          console.log(this.meta)
          this.complete = true
        })
    }
  }
}
</script>
